import { Input } from '@tarojs/components'
import classNames from 'classnames'
import styles from './index.module.less'

type SearchBarPropsType = {
  value: string | undefined;
  onChange: (val: SearchBarPropsType['value']) => void;
  placeholder: string;
  className?: string;
}
function SearchBar(props: SearchBarPropsType) {
  const { value, onChange, placeholder, className } = props
  return (
    <div className={classNames(styles.search, className)}>
      <div className={styles.wrapper}>
        <div className={styles.searchIcon}></div>
        <div className={styles.line}></div>
        <Input
          placeholder={placeholder}
          className={styles.input}
          maxlength={50}
          confirmType='search'
          value={value}
          onInput={(e) => onChange(e.detail.value)}
        />
      </div>
    </div>
  )
}

export default SearchBar